<template>
  <div class="advanced-filters">
    <h5>高级筛选</h5>
    
    <!-- 筛选条件构建器 -->
    <div class="filter-group">
      <select v-model="currentFilter.field" class="filter-field">
        <option value="id">ID</option>
        <option value="value">数值</option>
      </select>
      <select v-model="currentFilter.operator" class="filter-operator">
        <option value="equals">等于</option>
        <option value="greater">大于</option>
        <option value="less">小于</option>
        <option value="between">介于</option>
      </select>
      
      <input 
        v-if="currentFilter.operator !== 'between'" 
        type="number" 
        v-model.number="currentFilter.value1" 
        class="filter-value"
        placeholder="输入值"
      >
      <div v-else class="between-values">
        <input type="number" v-model.number="currentFilter.value1" class="filter-value" placeholder="最小值">
        <span>至</span>
        <input type="number" v-model.number="currentFilter.value2" class="filter-value" placeholder="最大值">
      </div>
      <button @click="addFilter" class="add-filter-btn">添加条件</button>
    </div>
    
    <!-- 筛选条件列表 -->
    <div class="filter-list" v-if="filters.length > 0">
      <div v-for="(filter, index) in filters" :key="index" class="filter-item">
        <span>{{ getFieldLabel(filter.field) }} {{ getOperatorLabel(filter.operator) }} {{ formatFilterValue(filter) }}</span>
        <button @click="removeFilter(index)" class="remove-filter-btn">×</button>
      </div>
      <button @click="clearAllFilters" class="clear-filters-btn">清除所有条件</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

// Props定义
const props = defineProps({
  filters: {
    type: Array,
    default: () => []
  }
})

// Emits定义
const emit = defineEmits(['update:filters', 'filters-change', 'filter-added', 'filter-removed', 'filters-cleared'])

// 字段标签映射
const fieldLabels = {
  id: 'ID',
  value: '数值'
}

// 操作符标签映射
const operatorLabels = {
  equals: '等于',
  greater: '大于',
  less: '小于',
  between: '介于'
}

// 当前正在构建的筛选条件
const currentFilter = reactive({
  field: 'id',
  operator: 'equals',
  value1: null,
  value2: null
})

// 本地筛选条件列表
const localFilters = ref([...props.filters])

// 监听props变化，同步到本地状态
watch(() => props.filters, (newFilters) => {
  localFilters.value = [...newFilters]
}, { deep: true })

// 获取字段标签
const getFieldLabel = (field) => {
  return fieldLabels[field] || field
}

// 获取操作符标签
const getOperatorLabel = (operator) => {
  return operatorLabels[operator] || operator
}

// 格式化筛选值显示
const formatFilterValue = (filter) => {
  if (filter.operator === 'between') {
    return `${filter.value1 || 0} 到 ${filter.value2 || 0}`
  }
  return filter.value1 || 0
}

// 验证当前筛选条件
const validateFilter = () => {
  if (currentFilter.operator !== 'between' && (currentFilter.value1 === null || currentFilter.value1 === undefined)) {
    return false
  }
  
  if (currentFilter.operator === 'between') {
    return (currentFilter.value1 !== null && currentFilter.value1 !== undefined && 
            currentFilter.value2 !== null && currentFilter.value2 !== undefined && 
            currentFilter.value1 <= currentFilter.value2)
  }
  
  return true
}

// 添加筛选条件
const addFilter = () => {
  if (!validateFilter()) {
    alert('请输入有效的筛选条件')
    return
  }
  
  // 创建筛选条件副本
  const newFilter = {
    field: currentFilter.field,
    operator: currentFilter.operator,
    value1: currentFilter.value1,
    value2: currentFilter.value2
  }
  
  // 添加到列表
  localFilters.value.push(newFilter)
  
  // 发出更新事件
  emit('update:filters', localFilters.value)
  emit('filters-change', localFilters.value)
  emit('filter-added', newFilter)
  
  // 重置当前筛选条件
  resetCurrentFilter()
}

// 移除筛选条件
const removeFilter = (index) => {
  const removedFilter = localFilters.value[index]
  localFilters.value.splice(index, 1)
  
  // 发出更新事件
  emit('update:filters', localFilters.value)
  emit('filters-change', localFilters.value)
  emit('filter-removed', removedFilter)
}

// 清除所有筛选条件
const clearAllFilters = () => {
  localFilters.value = []
  
  // 发出更新事件
  emit('update:filters', [])
  emit('filters-change', [])
  emit('filters-cleared')
}

// 重置当前筛选条件
const resetCurrentFilter = () => {
  currentFilter.field = 'id'
  currentFilter.operator = 'equals'
  currentFilter.value1 = null
  currentFilter.value2 = null
}
</script>

<style scoped>
.advanced-filters {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.advanced-filters h5 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.filter-field, .filter-operator, .filter-value {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

.filter-field {
  min-width: 80px;
}

.filter-operator {
  min-width: 100px;
}

.filter-value {
  min-width: 80px;
}

.between-values {
  display: flex;
  align-items: center;
  gap: 10px;
}

.add-filter-btn {
  padding: 8px 12px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.add-filter-btn:hover {
  background-color: #1976D2;
}

.filter-list {
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: white;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 14px;
}

.remove-filter-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.remove-filter-btn:hover {
  color: #c62828;
}

.clear-filters-btn {
  width: 100%;
  padding: 8px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.clear-filters-btn:hover {
  background-color: #d32f2f;
}

/* 深色模式下的样式 */
:global(.dark-mode) .advanced-filters {
  background-color: #2d2d2d;
}

:global(.dark-mode) .advanced-filters h5 {
  color: #fff;
}

:global(.dark-mode) .filter-field,
:global(.dark-mode) .filter-operator,
:global(.dark-mode) .filter-value,
:global(.dark-mode) .filter-item {
  background-color: #444;
  border-color: #666;
  color: #fff;
}

:global(.dark-mode) .remove-filter-btn {
  color: #bbb;
}

:global(.dark-mode) .remove-filter-btn:hover {
  color: #ff8a80;
}
</style>